<template>
	<view class="zxshop-register">
		<view  style="display: none;" class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<text class="icon logo">&#xe64b;</text>
			</view>
			<!-- 主体 -->
			<view class="main">
				<zxInput v-model="username" type="text" maxlength="11" placeholder="手机号"></zxInput>
				<zxInput
					v-model="verCode"
					type="number"
					maxlength="6"
					placeholder="验证码"
					isShowCode
					ref="zxInput"
					@setCode="getVerCode()"
				></zxInput>
			</view>
			<view class="event">
				<zxButton class="btn" text="提 交" :rotate="isRotate" @click.native="startReg()"></zxButton>
			</view>
		</view>
	</view>
</template>

<script>
	import myCloud from '@/common/util/cloud.js';
	import myConst from '@/common/util/const.js';
	import zxInput from '@/components/zx-ui/zx-login/zx-input.vue'
	import zxButton from '@/components/zx-ui/zx-login/zx-button.vue' 
	import { sendSmsCode,bindMobile } from '@/common/api/user.js'
	export default {
		components: {
			zxInput,
			zxButton
		},
		data() {
			return {
				username: '', // 用户/电话
				userId:'',
				verCode:"", //验证码
				isRotate: false, //是否加载旋转
			}
		},
		onLoad(options) {
			this.userId = options.uid
		},
		methods: {
			navBack(){
				uni.navigateBack();
			},
			async getVerCode(){
				var that = this
				//获取验证码
				if (!/^1\d{10}$/.test(this.username)) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式不正确'
					});
					return
				}
				that.$refs.zxInput.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
				const randomStr = '00000' + Math.floor(Math.random() * 1000000)
				const req = {
					mobile: this.username,
					code:randomStr.substring(randomStr.length - 6),
					type:'bind'
				}
				const res = await sendSmsCode(req)
				setTimeout(function(){
					that.$refs.zxInput.$emit('runCode',0); //模拟下需要 终止倒计时
				},60000)
			},
			async startReg() {
				//注册
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (!/^1\d{10}$/.test(this.username)) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式不正确'
					});
					return false;
				}
				if (this.verCode.length != 6) {
				    uni.showToast({
				        icon: 'none',
				        title: '验证码不正确'
				    });
				    return false;
				}
				this.isRotate = true
				const data = {
					uid: this.userId,
					mobile: this.username,
					code: this.verCode
				}
				const res = await bindMobile(data)
				this.isRotate = false
				console.log(res)
				this.$api.msg(res.msg);
				if (res.code == 0) {
					setTimeout(() => {
						uni.navigateBack({
						    delta: 2
						});
					}, 1000)
				}
			}
		},
		navBack() {
			uni.navigateBack();
		}
	}
</script>

<style lang="scss">
	.zxshop-register {
		
		.back-btn {
			position: absolute;
			left: 40upx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40upx;
			font-size: 40upx;
			color: $font-color-base;
		}

		.content {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.header {
				margin-top: 100upx;
				text-align: center;

				.logo {
					font-size: 100px;
					font-family: iconfont;
					color: $zx-color-primary;
				}
			}

			.main {
				display: flex;
				flex-direction: column;
				padding-left: 70rpx;
				padding-right: 70rpx;
			}

			.event {
				margin-top: 50upx;
			}
		}
	}
</style>